<template>
  <view class='productSort'>
	
	  <view class="content">
	  	<view class="content-bg">
	  		<image src="/static/None/bc_server.png" mode="widthFix"></image>
	  	</view>
		<view class="content-select" @click="selectserver">
			<view  :class="servertype==1?'select-in':''">
				预约服务
			</view>
			<view  :class="servertype==2?'select-in':''">
				我的服务
			</view>
		</view>
		<view class="address" v-if="servertype==1" @click="chooseLocation">
			<image src="/static/address/2.png" ></image>
			<text v-if="adrrname">{{adrrname}}</text>
			<text v-if="!adrrname">未选择当前位置</text>
			<image src="/static//orderDetails/1.png" ></image>
		</view>
		
		<view class="info" v-if="servertype==1">
			<view class="info-add">
				+
			</view>
			<view class="info-text">
				选择服务宠物
			</view>
		</view>
		
		<view class="select-tab" v-if="servertype==1">
			<view class="select-tab-item" v-for="(item,index) in selectlist" :key="index">
				<text>{{item.name}}</text>
			     <image class="select-tab-itemselect" :src="item.setlecticon" ></image>
				 <image :src="item.icon" ></image>
			</view>
		</view>
		
		
	  </view>
	  <view class="list-cw" v-if="servertype==1">
		  <view class="list-cw-item" v-for="(item,index) in shoplist" :key="index" @click="goStorefun(item)">
			  <view class="right-tags-img">
			  	<image src="./static/images/store3.png" ></image>
				<view class="right-tags-text">
					{{item.distance}}Km
				</view>
			  </view>
		  	<view class="list-cw-item-img">
		  		<image :src="httpUrlFn(item.image)" ></image>
		  	</view>
			<view class="list-cw-item-info">
				<view class="list-cw-item-title">
					{{item.name}}
				</view>
				<view class="list-cw-item-listimg">
					<image :src="item1<item.grade?'/static/images/store4.png':'/static/images/store5.png'" v-for="(item1,index1) in 5" :key="index1"></image>
					
					<text>{{item.grade}}分</text>
				</view>
				<view class="list-cw-item-lx">
					<text class="list-cw-item-zt">{{item.tradeStatus==1?"营业中":"休息中"}}</text>
					<text class="list-cw-item-xg"></text>
					<text class="list-cw-item-time">{{item.openBeginTime}} — {{item.openEndTime}}</text>
				</view>
				<view class="list-cw-item-tag">
					<view class="list-cw-item-tag-index" v-for="(item2,index2) in item.serviceProjectlist" :key="index2">
					{{item2}}
					</view>
					
				</view>
			</view>
		  </view>
		  <u-loadmore
		      v-if="shoplist.length>0"
		      :status="status"
		      :icon-type="iconType"
		      :load-text="loadText"
		      @loadmore="loadNextFn"
		  />
	  	
	  </view>
	  
	  
	  <view class="list-myfw" v-if="servertype==2&&myServiceList.length>0" >
		  <view class="myserver-list">
		  	  <view class="myserver-list-icom">
		  	  	<u-icon name="clock" color="#FFFFFF" size="22"></u-icon>
		  	  </view>
			  <view class="myserver-list-title">
			  	<view class="title-name">已付款</view>
				<view class="title-content">请留意服务时间</view>
			  </view>
		  </view>
		 <view class="myserver-content-k">
		 	
		
		  <view class="myserver-content" v-for="(item,index) in myServiceList" :key="index">
			  <view class="top">
			  	<view class="top-img">
			  		<image :src="httpUrlFn(item.packageImage)"></image>
			  	</view>
				<view class="top-title">
					<view>服务详情</view>
					<view>{{item.packageName}}</view>
				</view>
			  </view>
			  <!-- @click="goupshopfun(item)" -->
			  <view class="upder" >
			  	<!-- <text>修改订单</text>
				
				<u-icon name="arrow-right" color="#BFBFBF" size="13"></u-icon> -->
			  </view>
			  <view class="nr-content">
				<view class="nr-content-k">
					<view class="nr-content-left">
						美容师
					</view>
					<view class="nr-content-right">
						{{item.teamName}}
					</view>
				</view>
				<view class="nr-content-k">
					<view class="nr-content-left">
						服务时间
					</view>
					<view class="nr-content-right">
						{{item.schedulDate}}  {{item.timeSection}}  
					</view>
				</view>
				<view class="nr-content-k">
					<view class="nr-content-left">
						服务门店
					</view>
					<view class="nr-content-right">
						{{item.shopName}}
					</view>
				</view>
				<view class="nr-content-k">
					<view class="nr-content-left">
						门店地址
					</view>
					<view class="nr-content-right">
						{{item.shopAddress}}
					</view>
				</view>
			  	
			  </view>
		  	 </view> 
		  </view>
	  		
	  	
	  </view>
	  
	  
	  
	  
	  
 
	
	<u-tabbar
		:value="tabbarvalue"
		@change="name => tabbarvalue = name"
		:fixed="true"
		:placeholder="true"
		:safeAreaInsetBottom="true"
		activeColor="#EFE281"
		inactiveColor="#FFFFFF"
		
	>
	<view class="cat-img">
		<image src="/static/images/cat.png" ></image>
	</view>
	<view class="dog-img">
		<image src="/static/images/dog.png" ></image>
	</view>
		<u-tabbar-item text="首页" icon="home" @click="tabbarselect"></u-tabbar-item>
		<u-tabbar-item text="门店" icon="photo" @click="tabbarselect"></u-tabbar-item>
		<u-tabbar-item text=" " @click="tabbarselect">
			<view class="select" slot="active-icon">
				<image
							class="u-page__item__slot-icon"
							src="/static/images/index.png"
						></image>
			</view>
			<view class="noselect" slot="inactive-icon">
				<image
							class="u-page__item__slot-icon"
							src="/static/images/index.png"
						></image>
			</view>
			
		</u-tabbar-item>
		<u-tabbar-item text="活动" icon="play-right" @click="tabbarselect"></u-tabbar-item>
		<u-tabbar-item text="我的" icon="account" @click="tabbarselect"></u-tabbar-item>
	</u-tabbar>
  </view>
</template>

<script>
// import {
//   getCategoryList
// } from '@/api/store.js';
// import ClipboardJS from "@/plugin/clipboard/clipboard.js";
import {getPetShopPage,getMyService,getTypeGoodsList} from "@/api/goods";
// import {getShopPing} from "@/api/shopping";
import {BASE_URL_IMAHE} from "../../../utils/https";
import navBar from "@/components/tarbarnav.vue";
import { forEach } from "../../uview-ui/libs/luch-request/utils";

const app = getApp()
export default {
	components: {
	  navBar,
	},
  data() {
    return {
		longitude:"116.393541",
		latitude:"39.902292",
		isselectadrr:false,
		adrrname:"",
		tabbarvalue: 1,
		servertype:1,
     
      status: "loadmore",
      iconType: "flower",
      loadText: {
        loadmore: "点击加载更多",
        loading: "正在加载，请喝杯茶...",
        nomore: "哼~😕我也是有底线的~",
        //哼~😕我也是有底线的~
        //😕我也是有底线的~
      },
	  selectlist:[
		{
			  name:"全部分类",
			  icon:"",
			  selecicon:"",
		},
		{
		  			  name:"离我最近",
					  icon:"",
					  selecicon:"",
		},
		{
		  			  name:"综合推荐",
					  icon:"",
					  selecicon:"",
		},
		{
		   			  name:"筛选",
					  icon:"",
					  selecicon:"",
		}
	  ],
	  selectlistindex:0,
	 pagenum:0,
	  ShopPagedata:{
		  serviceObj:"",
		  pageNo:1,
		  pageSize:10,
		  longitude:"116.393541",
		  latitude:"39.902292"},
	   shoplist:[],
	   myServiceList:[],
      
	  // selectproductList:0,
    }
  },
  onLoad(options) {
	this.ShopPagedata.serviceObj=app.globalData.data.serviceObj
    this.getgetLocationfun()
	
  },
  onShow() {
	  
	  
	 
	  uni.hideTabBar()
	  this.tabbarvalue=1
	   return
	  
	  this.typegooddate.v=uni.getStorageSync("v")?uni.getStorageSync("v"):''
	  this.typegooddate.userId=uni.getStorageSync("userId")?uni.getStorageSync("userId"):''
	  this.getAllCategory();
    this.userInfoServer = uni.getStorageSync("userInfoServer");
  },
  //上拉
  onReachBottom() {
    console.log("触发上拉加载");
    // this.shopPingList()
	if(this.pagenum>=this.ShopPagedata.pageNo){
		this.getPetShopPagefun()
	}
	
  },
  methods: {
	  goStorefun(item){
		  if (!uni.getStorageSync("userId")) {
		    // 弹窗告诉用户去登录
		    uni.showModal({
		      title: "温馨提示",
		      content: "此时此刻需要您登录喔~",
		      // showCancel: false,
		      confirmText: "去登录",
		      cancelText: "再逛会",
		      success: (res) => {
		        if (res.confirm) {
		          uni.navigateTo({
		            url: "/pages/empower/mp-weixin",
		          });
		        }
		        
		        
		      },
		    });
		  		return
		  }
		  uni.navigateTo({
		  	url:"/pages/subpackage/store/index?shopId="+item.id
		  })
		
	  },
	  
	  //获取所在附近地址
	  chooseLocation: function () {
		   var that=this
	    uni.chooseLocation({
	      success: (res) => {
	        if (res.address) {
	          console.log(res, "地址获取定位");
	          //截取地区
	        
	  
	         
	          that.adrrname = res.name;
			  that.ShopPagedata.longitude=res.longitude
			  that.ShopPagedata.latitude=res.latitude
			  that.ShopPagedata.pageNo=1
			  that.shoplist=[]
			  that.getPetShopPagefun()
	         console.log(that.adrrname,that.ShopPagedata)
	          // this.$set(
	          //   this.userAddress,
	          //   "detail",
	          //   res.name
	          // );
	        }
	      },
	    });
	  },
	  //获取经纬度
	  getgetLocationfun(){
		  var that=this
		  uni.getLocation({
		  	type: 'wgs84',
		  	success: function (res) {
		  			that.ShopPagedata.longitude=res.longitude
		  			that.ShopPagedata.latitude=res.latitude
		  			console.log("当前位置的经纬度",res)
		  		console.log('当前位置的经度：' + res.longitude);
		  		console.log('当前位置的纬度：' + res.latitude);
				that.getPetShopPagefun()
		  	},
		  		fail:function (res) {
		  			
		  		
		  	}
		  });
	  },
	  async getPetShopPagefun(){
		  this.status = "loading";
		  var res= await getPetShopPage(JSON.stringify(this.ShopPagedata))
		  if(res.result==0){
			   console.log(res)
			   res.page.list.forEach((item,index)=>{
				   item.serviceProjectlist=item.serviceProject.split(",")
			   })
			  this.shoplist.push(...res.page.list) 
			  this.pagenum=Math.ceil(res.page.count/this.ShopPagedata.pageSize)
				  this.ShopPagedata.pageNo++
			  if( this.pagenum>this.ShopPagedata.pageNo){
				  
			 setTimeout(() => {
			 	     this.status = "loadmore";
			 	   }, 800);
			 }else{
			 	setTimeout(() => {
			 	  this.status = "nomore";
			 	}, 800);
			 }
			  console.log("this.shoplist",this.shoplist,res.page.list)
		  }
		  
		  var ress= await getMyService(JSON.stringify({userId:uni.getStorageSync("userId")}))
		  if(ress.result==0){
		  			this.myServiceList=ress.orderList
					console.log(this.myServiceList,"this.myServiceList")
		  }
		 
	  },
	  selectserver(){
		  this.servertype=this.servertype==1?2:1
	  },
    //点击组件触发上拉加载
    loadNextFn() {
      console.log("点击组件触发上拉加载2123");
      this.shopPingList()
    },

    httpUrlFn(item) {
      return  BASE_URL_IMAHE + item;
    },
	gologin(){
		if (!uni.getStorageSync("userId")) {
		  // 弹窗告诉用户去登录
		  uni.showModal({
		    title: "温馨提示",
		    content: "此时此刻需要您登录喔~",
		    // showCancel: false,
		    confirmText: "去登录",
		    cancelText: "再逛会",
		    success: (res) => {
		      if (res.confirm) {
		        uni.navigateTo({
		          url: "/pages/empower/mp-weixin",
		        });
		      }
		      
		      
		    },
		  });
				return
		}
	},

    //商品点击
    childShopPing(item, index) {
		
      console.log(item, '商品')
      uni.navigateTo({
        url: `/pages/subpackage/goods/detail?goodsId=${item.id}&pic=${item.pic}&prodName=${item.prodName}&price=${item.price}&oriPrice=${item.oriPrice}&vrPayUsers=${item.vrPayUsers}&commission=${item.commission}&properties=${item.properties}&content=${encodeURIComponent(JSON.stringify(item.content))}&channelId=1&itemType=1`,
      });

    },


    infoScroll: function () {
      let that = this;
      // let len = that.productList.length;
      // console.log(len, 'len')
      // let child = that.productList[len - 1] && that.productList[len - 1].child ? that.productList[len - 1].child : [];
      // console.log(child, 'child')
      // this.number = child ? child.length : 0;

      //设置商品列表高度
      // uni.getSystemInfo({
      //   success: function (res) {
      //     console.log(res.windowHeight, 'res.windowHeight')
      //     that.height = (res.windowHeight) * (750 / res.windowWidth) - 98;
      //   },
      // });
      // let height = 0;
      // let hightArr = [];
      // for (let i = 0; i < len; i++) {
      //   //获取元素所在位置
      //   let query = uni.createSelectorQuery().in(this);
      //   let idView = "#b" + i;
      //   query.select(idView).boundingClientRect();
      //   query.exec(function (res) {
      //     let top = res[0].top;
      //     console.log(top, 'top')
      //     hightArr.push(top);
      //     that.hightArr = hightArr
      //   });
      // }
      // ;
    },
    tap: function (index,  item) {
      // console.log(index,  item, '分类id')
      // this.toView = id;
      this.navActive = index;
      this.indexTap = index
      this.params.categoryId = item.id
      this.params.current = 1
      this.params.size = 10
      this.recordsList = []
      this.shopPingList()
    },

    //请求商品详情列表
    async shopPingList() {
		return
      this.status = "loading";
      let that = this;

      const res = await getShopPing(this.params)
      if (res.code === 0) {
        that.recordsList.push(...res.data.records);

        this.recordsList.forEach((item) => {
          const CommissionToggle =
              this.userInfoServer.roleId === 1
                  ? item.uniteCommission
                  : this.userInfoServer.roleId === 2
                      ? item.partnerCommission
                      : this.userInfoServer.roleId === 3
                          ? item.facilitatorCommission
                          : this.userInfoServer.roleId === 4
                              ? item.shopkeeperCommission
                              : "";
          if (CommissionToggle) {
            item.CommissionToggle = CommissionToggle
          } else {
            item.CommissionToggle = '0'
          }
        });


        if (res.data.records.length === 0) {
          setTimeout(() => {
            this.status = "nomore";
          }, 800);
          return;
        }

        if (res.data.records.length >= this.params.size) {
          this.params.current++;
          setTimeout(() => {
            this.status = "loadmore";
          }, 800);
          return;
        }

        if (this.recordsList.length <= this.params.size) {
          this.params.current++;
          setTimeout(() => {
            this.status = "loadmore";
          }, 800);
        } else if (
            res.data.records.length !== 0 &&
            res.data.records.length < this.params.size
        ) {
          this.params.current++;
          setTimeout(() => {
            this.status = "loadmore";
          }, 800);
          return;
        }


        // setTimeout(function () {
        //   that.infoScroll();
        // }, 500)
      }

    },

    //商品分类
    async classification(id) {
      let that = this;
      // const res = await selProds()
	
      // console.log(res, '商品分类')
      
	  
	   const resTypeGoods = await getTypeGoodsList(JSON.stringify(this.typegooddate))
	   console.log("resTypeGoods",resTypeGoods)
	   if (resTypeGoods.result == 0) {
		    // console.log("resTypeGoods",resTypeGoods.goodsTypeList)
	     that.productList = resTypeGoods.goodsTypeList;
	     // if (!id) {
	     //   //第一次请求查询第一个分类的商品
	     //   that.params.categoryId = res.data[0].id
	     // } else {
	     //   that.params.categoryId = id
	     // }
	   
	     //请求商品详情列表
	     await this.shopPingList()
	   }
    },

    getAllCategory: async function () {
      let that = this;

      //请求商品分类
      await this.classification()

      // selProds().then(res => {
      //   that.productList = res.data;
      //   setTimeout(function(){
      //     that.infoScroll();
      //   },500)
      // })

      // setTimeout(function () {
      //   that.infoScroll();
      // }, 500)
    },
    scroll: function (e) {
      let scrollTop = e.detail.scrollTop;
      let scrollArr = this.hightArr;
      for (let i = 0; i < scrollArr.length; i++) {
        if (scrollTop >= 0 && scrollTop < scrollArr[1] - scrollArr[0]) {
          this.navActive = 0
        } else if (scrollTop >= scrollArr[i] - scrollArr[0] && scrollTop < scrollArr[i + 1] - scrollArr[0]) {
          this.navActive = i
        } else if (scrollTop >= scrollArr[scrollArr.length - 1] - scrollArr[0]) {
          this.navActive = scrollArr.length - 1
        }
      }
    },
    searchSubmitValue: function (e) {
      console.log(e.detail.value, '搜索')
      if (this.$util.trim(e.detail.value).length > 0) {
        uni.navigateTo({
          url: '/pages/empower/goods_search/index?searchValue=' + e.detail.value
        })
      } else {
        return this.$util.Tips({
          title: '请填写要搜索的产品信息'
        });
      }
    },
	//底部导航栏切换
	tabbarselect(e){
		
		switch (this.tabbarvalue){
			case 0:
			uni.switchTab({
				url:"/pages/index/index"
			})
				break;
			case 1:
			uni.switchTab({
				url:"/pages/goods_cate/goods_cate"
			})
				break;
			case 2:
			uni.navigateTo({
				url:"/pages/subpackage/viewwbehtml/index"
			})
				break;
			case 3:
			uni.switchTab({
				url:"/pages/share/share"
			})
				break;
			case 4:
			uni.switchTab({
				url:"/pages/user/index"
			})
				break;
			default:
				break;
		}
		
	},
  }
}
</script>

<style scoped lang="scss">
	.productSort{
		padding-bottom: rpx(25);
		　　padding-bottom: constant(safe-area-inset-top);  // 顶部安全区
		　　padding-bottom: env(safe-area-inset-top);    // 顶部安全区
		　　padding-bottom: constant(safe-area-inset-bottom);  // 底部安全区
		　　padding-bottom: env(safe-area-inset-bottom);    // 底部安全区
		　　box-sizing: content-box;
	}
	.content{
		width: 750rpx;
		height: 563rpx;
		border-radius: 0rpx 0rpx 0rpx 0rpx;
		opacity: 1;
		position: relative;
		.content-bg{
			width: 100%;
			height: 100%;
			overflow: hidden;
			image{
				width: 100%;
				height: 100%;
			}
		}
		.content-select{
			width: 329rpx;
			height: 72rpx;
			background: #FFFFFF;
			opacity: 1;
			position: absolute;
			top:92rpx;
			left: 28rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			border-radius: 35rpx;
			view{
				width: 156rpx;
				height: 64rpx;
				background: #FFFFFF;
				color: #B3B3B3;
				line-height: 64rpx;
				text-align: center;
				border-radius: 35rpx;
			}
			.select-in{
				background: #EB5F3F;
				color: #FFFFFF;
				opacity: 1;
			}
			
		}
		.address{
			position: absolute;
			left: 28rpx;
			top: 190rpx;
			display: flex;
			align-items: center;
			image:nth-child(1){
				width: 30rpx;
				height: 41rpx;
			}
			image:nth-child(3){
				width: 17rpx;
				height: 23rpx;
			}
			text{
				width: auto;
				height: 37rpx;
				font-size: 31rpx;
				color: #040000;
				line-height: 43rpx;
				margin-left: 20rpx;
				margin-right: 11rpx;
			}
		}
		.info{
			position: absolute;
			left: 28rpx;
			top: 254rpx;
			display: flex;
			align-items: center;
			.info-add{
				width: 148rpx;
				height: 148rpx;
				border-radius: 50%;
				text-align: center;
				line-height: 148rpx;
				background-color: white;
				color: #B3B3B3;
				font-size: 60rpx;
				font-weight: bolder;
			}
			.info-text{
				font-size: 33rpx;
				margin-left: 29rpx;
				color: #040000;
				line-height: 46rpx;
			}
		}
		.select-tab{
			position: absolute;
			display: flex;
			justify-content: space-between;
			padding: 0 28rpx;
			top: 490rpx;
			left: 0rpx;
			width: 100%;
			box-sizing: border-box;
			.select-tab-item{
				image{
					width: 18rpx;
					height: 12rpx;
				}
				.select-tab-itemselect{
					width: 18rpx;
					height: 12rpx;
				}
				text{
					font-size: 28rpx;
					color: #4E4D4D;
					line-height: 39rpx;
				}
			}
		}
		
		
		
	}
	.list-cw{
		padding-bottom: 60rpx;
		.list-cw-item{
			width: 684rpx;
			height: auto;
			background: #FFFFFF;
			opacity: 1;
			border-radius: 35rpx;
			position: relative;
			margin: 0 auto 42rpx;
			display: flex;
			padding: 12rpx 18rpx;
			.right-tags-img{
				position: absolute;
				right: 19rpx;
				top: 14rpx;
				image{
					width: 58rpx;
					height: 58rpx;
				}
				.right-tags-text{
					font-size: 18rpx;
					margin-top: 6rpx;
					color: #4E4D4D;
					line-height: 25rpx;
					text-align: right;
				}
			}
			.list-cw-item-img{
				width: 188rpx;
				height: 194rpx;
				border-radius: 25rpx;
				opacity: 1;
				image{
					width: 188rpx;
					height: 194rpx;
				}
				
			}
			.list-cw-item-info{
				margin-left: 27rpx;
				display: flex;
				flex-direction: column;
				.list-cw-item-title{
					font-size: 31rpx;
					color: #040000;
					line-height: 43rpx;
					width: 350rpx;
				}
				.list-cw-item-listimg{
					width: 230rpx;
					display: flex;
					position: relative;
					margin-top: 8rpx;
					image{
						width: 29rpx;
						height: 29rpx;
						// background: #EB5F3F;
						opacity: 1;
						margin-right: 7rpx;
					}
					text{
						width: 65rpx;
						height: 25rpx;
						font-size: 21rpx;
						color: #EB5F3F;
						line-height: 29rpx;
						position: absolute;
						bottom: -10rpx;
						right: -10rpx;
						white-space: normal;
					}
				}
				.list-cw-item-lx{
					display: flex;
					align-items: center;
					margin-top: 12rpx;
					.list-cw-item-xg{
						display: block;
						width: 2rpx;
						height: 25rpx;
						background: #040000;
						margin-left: 9rpx;
						margin-right: 14rpx;
					}
					.list-cw-item-zt{
						font-size: 21rpx;
						color: #EB5F3F;
						line-height: 29rpx;
					}
					.list-cw-item-time{
						font-size: 21rpx;
						color: #4E4D4D;
						line-height: 29rpx;
						
					}
					
				}
				.list-cw-item-tag{
					display: flex;
					align-items: center;
					margin-top: 17rpx;
					.list-cw-item-tag-index{
						width: 64rpx;
						height: 29rpx;
						background: #F9CFC6;
						border-radius: 25rpx;
						margin-right: 8rpx;
						font-size: 19rpx;
						color: #EB5F3F;
						line-height: 29rpx;
						text-align: center;
					}
				}
				
			}
		}
	}
	
	.list-myfw{
		width: 100%;
		height: auto;
		margin-top: -300rpx;
		position: relative;
		.myserver-list{
			margin-left: 44rpx;
			color: white;
			border-left:  2rpx solid #FFFFFF;
			position: relative;
			height: 500rpx;
			// border: 2rpx solid #FFFFFF;
			.myserver-list-icom{
				position: absolute;
				top: -44rpx;
				left: -22rpx;
			}
			.myserver-list-title{
				margin-left: 20rpx;
				.title-name{
					font-size: 32rpx;
					color: #FFFFFF;
					line-height: 45rpx;
				}
				.title-content{
					margin-top: 10rpx;
					font-size: 25rpx;
					color: #FFFFFF;
					line-height: 35rpx;
					
				}
			}
		}
		.myserver-content-k{
			margin-top: -320rpx;
			z-index: 1;
			position: relative;
			.myserver-content{
				width: 693rpx;
				height: 336rpx;
				background: #FFFFFF;
				opacity: 1;
			
				margin: 0 auto;
				margin-top: 120rpx;
				
				border-radius: 25rpx;
				.top{
					position: absolute;
					
					.top-img{
						width: 124rpx;
						height: 124rpx;
						background-color: #ffffff;
						border-radius: 50%;
						position: absolute;
						top: -62rpx;
						left: 9rpx;
						z-index: 1;
						display: flex;
						align-items: center;
						justify-content: center;
						image{
							width: 120rpx;
							height: 120rpx;
							border-radius: 50%;
						}
					}
					.top-title{
						width: 370rpx;
						height: 120rpx;
						background: #F7DADE;
						background-color: rgba(247, 218, 222, 0.2);
						border-radius: 35rpx;
						position: absolute;
						top: -62rpx;
						left: 79rpx;
						padding-top: 20rpx;
						padding-left: 80rpx;
						box-sizing: border-box;
						
					}
					.top-title view:nth-child(1){
						
						font-size: 25rpx;
						color: #000000;
						line-height: 35rpx;
					}
					.top-title view:nth-child(2){
						margin-top: 20rpx;
						font-size: 25rpx;
						color: #000000;
						line-height: 35rpx;
					}
				}
				.upder{
					padding-top: 60rpx;
					display: flex;
					justify-content: flex-end;
					align-items: center;
					font-size: 25rpx;
					color: #BFBFBF;
					line-height: 35rpx;
					margin-right: 20rpx;
					
				}
				.nr-content{
					padding-top: 20rpx;
					padding-left: 45rpx;
					.nr-content-k{
						padding-top: 10rpx;
						display: flex;
						justify-content: flex-start;
						align-items: center;
					}
					.nr-content-left{
						width: 130rpx;
						font-size: 25rpx;
						font-family: 'MiSans, 'MiSans;
						font-weight: normal;
						color: #BFBFBF;
						line-height: 35rpx;
					}
					.nr-content-right{
						font-size: 25rpx;
						color: #000000;
						line-height: 35rpx;
					}
				}
			}
			.myserver-content:first-child{
				margin-top: 0rpx;
			}
			
		}
			
		
	}



// 底部导航栏样式
.u-tab-bar{
	padding-top: 30rpx;
	// position: relative;
}
// 底部导航栏样式
.select{
	position: absolute;
	bottom: -30rpx;
	display: flex;
	justify-content: center;
}
.noselect{
	position: absolute;
	bottom: -30rpx;
	display: flex;
	justify-content: center;
}
.u-page__item__slot-icon{
	width: 156rpx;
	height: 156rpx;
	margin: 0 auto;
	// padding-bottom: 20rpx;
}
.cat-img{
	position: absolute;
	top: -50rpx;
	left: 116rpx;
	image{
		width: 89rpx;
		height: 92rpx;
	}
}
.dog-img{
	position: absolute;
	top: -53rpx;
	right: 112rpx;
	image{
		width: 80rpx;
		height: 106rpx;
	}
}


</style>
